<!DOCTYPE html>
<html>

<head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'/>
</head>


<body >
<h1>Like đi</h1>

<div id="error-box" style="display:none;"></div>

<a id="like" href="">Like</a>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        event.preventDefault();
        $('#like').click(function(){
            // do the AJAX post
            $.ajax({
                type: 'POST',
                url: ('/like'),
                data: {id: "52cbb0cedcc4e1381a00000d"},
                beforeSend: function(){

                },
                success: function(data, status){
                    $('#error-box').attr('style','display:none');
                    if (data == "Like") {
                        $(this).html('Unlike');
                    }
                    else {
                        $(this).html('Like');
                    }
                    return false;

                },
                error: function(xhr, status, err){
                    var $errorBox = $('#error-box');
                    alert(status);
                    alert(err);
                    $errorBox.show().html('<p>'+xhr.responseText+'</p>');
                }
            });
        });
    });


</script>

</body>
</html>